<template>
  <div>
    <zm-panel title="选择导出字段" :visible.sync="value" @change="close">
      <div class="df-wrap df" style="height: 100%;">
        <div class="pl20 flex1">
          <zm-checkbox
            class="wp100 mt20"
            v-model="item.vals"
            v-for="(item, key) in newMainList"
            :list="item.list"
            :option="item.options"
            :key="key"
          ></zm-checkbox>
        </div>
        <!-- <div class="drap-list w200 pl10">
          <el-button
            type="text"
            class="drap-list-item mg0 fs16"
            v-for="(item, key) in checkedInfos"
            :key="key"
          >
            <i class="el-icon-rank mr10" v-if="item.name"></i>
            {{ item.name }}
            <i
              class="el-icon-close ml20"
              @click="onClose(item)"
              v-if="item.name"
            ></i>
          </el-button>
        </div> -->
      </div>
      <div slot="footer" class="tr">
        <zm-export :api="api" :params="mergedExportParams" />
      </div>
    </zm-panel>
  </div>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import drapMixin from '@/mixins/drapMixin'
import ZmCheckbox from '@/components/ZmCheckbox'

export default {
  name: 'ExportSelector',
  components: { ZmCheckbox },
  mixins: [panelMixin, drapMixin],
  props: {
    mainList: {
      // 基本格式[ vals: [], list: [] ]
      type: Array,
      default: () => []
    },
    api: {
      type: Function,
      default: () => {}
    },
    exportParams: {
      type: Object,
      default: () => {}
    },
    fieldKey: {
      // 导出需要导出的字段，参数的键
      type: String,
      default: ''
    },
    config: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      checkedInfos: [],
      newMainList: JSON.parse(JSON.stringify(this.mainList))
    }
  },
  computed: {
    mergedExportParams () {
      const exportField =
        this.checkedInfos.length > 0 &&
        this.checkedInfos.reduce((str, item) => {
          // eslint-disable-next-line no-return-assign
          return (str += `${item.value},`)
        }, '')
      const filed = {}
      const key = this.fieldKey || 'exportField'
      filed[key] = exportField
      return { ...this.exportParams, ...filed }
    }
  },
  watch: {
    newMainList: {
      handler (cVal) {
        this.handlerList()
      },
      deep: true
    }
  },
  methods: {
    onClose (tag) {
      const newItem = this.newMainList[tag.key].vals
        .split(',')
        .filter(item => item !== tag.value)
      this.$set(this.newMainList[tag.key], 'vals', newItem.join(','))
    },
    onDrap (newlist = []) {
      this.setSort({
        list: newlist,
        element: document.querySelector('.drap-list'),
        darpClass: '.drap-list-item'
      })
    },
    handlerList () {
      this.checkedInfos.splice(0)
      this.newMainList.forEach((item, key) => {
        const checks = []
        item.vals.split(',').forEach(id => {
          let checkItem = item.list.find(_item => _item.value === id)
          checkItem = checkItem ? { ...checkItem, key } : {}
          checks.push(checkItem)
        })
        this.checkedInfos.push(...checks)
      })
      // this.onDrap(this.checkedInfos)
    }
  }
}
</script>
